import React, { Component } from 'react';
import {SingleInput,QiniuMulti,RadioInput,DateInput} from '../common/Forminput';
import {browserHistory,hashHistory,Link} from 'react-router';
import { TitleforOU } from '../common/Forminfo';
import { connect } from 'react-redux';
import { ClearanceUpdate } from '../../Redux/Actions/clearanceAction';
import { QiniuUptokenGet } from '../../Redux/Actions/qiniuAction';
import SweetAlert from 'react-bootstrap-sweetalert';

const history = process.env.NODE_ENV !== 'production' ? browserHistory : hashHistory;

class UpdateClearance extends Component {
    constructor(props){
      super(props);
      this.state = {
        ...props.clearanceReducer.clearance.data,
        profileId:props.clearanceReducer.clearance.data.userId,
        customsClearanceId:props.clearanceReducer.clearance.data.id,
        alertstate:"tohide"
      }
      this.submitHandler = (event)=>{
        event.preventDefault(); 
        const token = this.props.authReducer.user.data.token;
        let opt =this.state;
        for(let i in opt){
            if(opt[i]==null){
                opt[i] = "";
            }
            if(typeof opt[i] == "object"){
                opt[i] = opt[i].join(",")
            }
        }
        this.props.dispatch(ClearanceUpdate(token,opt));
        this.setState({
            alertstate:"toshow"
        })
      }

    }

    componentWillMount(){
      this.props.dispatch(QiniuUptokenGet(this.props.authReducer.user.data.token));
    }

  radioHandle(name,value){
    this.setState({
      [name]:value
    })
  }
  fallbackParent(name,value){
    this.setState({[name]:value});
  }
  timeback(name,value){
    this.setState({[value]:name});
  }
    getVoiUrl(photoUrl){
        this.setState({
            openBoxUrl:photoUrl
        })
    }
    getVoiUrl2(photoUrl){
        this.setState({
            taxBillUrl:photoUrl
        })
    }


    render(){
        let clearance = {...this.state}
        const token  = this.props.qiniuReducer.qiniu.data?this.props.qiniuReducer.qiniu.data:{token:""};
        return(
        <div className="col-sm-9 col-sm-offset-3 col-lg-10 col-lg-offset-2 main">			
          <div className="row">
            <ol className="breadcrumb">
              <li><a href="#"><span className="glyphicon glyphicon-home"></span></a></li>
              <li className="active">报关</li>
            </ol>
          </div>
          <div className="row">
            <div className="col-lg-12">
              <div className="panel panel-default">
                <div className="panel-heading">
                    {clearance.carFrameNo}/{clearance.carColor} 报关
                    <Link className="pull-right btn btn-primary" style={{marginTop:"6px",marginRight:"6px"}} to={{pathname:"/main/clearance",state:{profileId:clearance.userId,orderId:clearance.orderId,backurl:this.props.location.state.backurl}}}>详情</Link>
                </div>
                <div className="panel-body">
                  <form className="form-horizontal" onSubmit={this.submitHandler} style={{paddingLeft:"15%"}}>

                  <TitleforOU label="换单" />
                  <DateInput label="换单时间" name="changeBillTime" value={this.state.changeBillTime} backParent={this.timeback.bind(this)} tips="" />

                  <div className="form-group">
                        <div className="col-sm-8 control-title">
                            <label className="col-sm-2 control-label">拆箱
                            </label>
                        </div>
                    </div>
                    <QiniuMulti src={clearance.openBoxUrl} label="拆箱照片" info={"请上传付款提单照片，最多上传2张。"} token={token.token} limitNum="4" callbackParent={this.getVoiUrl.bind(this)}/>

                    <TitleforOU label="出税信息" />
                    <RadioInput label="是否出税" radioname="isSetTax" option1="是" option2="否" backParent={this.radioHandle.bind(this)} />
                    <RadioInput label="是否垫税" radioname="isPadTax" option1="是" option2="否" backParent={this.radioHandle.bind(this)} />
                    <RadioInput label="是否立即出税 " radioname="isPopTax" option1="是" option2="否" backParent={this.radioHandle.bind(this)} />
                    <QiniuMulti src={clearance.taxBillUrl} label="税单照片" info={"请上传付款提单照片，最多上传2张。"} token={token.token} limitNum="4" callbackParent={this.getVoiUrl2.bind(this)}/>

                    <TitleforOU label="海关放行" />
                    <DateInput label="放行时间" name="customsClearanceTime" value={clearance.customsClearanceTime} backParent={this.timeback.bind(this)} tips="" />

                    <TitleforOU label="整改" />
                    <DateInput label="整改时间" name="rectificationTime" value={clearance.rectificationTime} backParent={this.timeback.bind(this)} tips="" />

                    <TitleforOU label="车辆检测线" />
                    <DateInput label="预计时间" name="estimatedTime" value={clearance.estimatedTime} backParent={this.timeback.bind(this)} tips="" />
                    <DateInput label="实际时间" name="actualTime" value={clearance.actualTime} backParent={this.timeback.bind(this)} tips="" />

                    <TitleforOU label="车库信息" />
                    <SingleInput label="车库名字" name="garageName" placeholder="请输入车库名字" value={clearance.garageName} backParent={this.fallbackParent.bind(this)}/>
                    <SingleInput label="车库地址" name="garageAddress" placeholder="请输入车库地址" value={clearance.garageAddress} backParent={this.fallbackParent.bind(this)}/>

                    <div className="col-sm-8" style={{textAlign: "center"}}>
                      <button type="submit" className="btn btn-primary" style={{marginRight: "15px"}}>
                        确定
                      </button>
                    </div>
                  </form>
                </div>
                <div  id="alertwrap" className={this.state.alertstate}>
                    <SweetAlert
                    info
                    confirmBtnText="确定"
                    confirmBtnBsStyle="primary"
                    title="报关信息已提交。"
                    onConfirm={()=>{this.setState({alertstate:"tohide"});history.push({pathname:"/main/clearance",state:{profileId:this.state.userId,orderId:this.state.orderId,backurl:this.props.location.state.backurl}})}}
                    >
                    </SweetAlert>
                </div>
              </div> 
            </div>
          </div>	
        </div>
        )
    }
}

export default connect((state) => {
    const { authReducer,clearanceReducer,qiniuReducer } = state;
    return {
        authReducer,clearanceReducer,qiniuReducer
    }
})(UpdateClearance);